<template>
    <div>
        <com-heard></com-heard>
        <div class="pu-con">
            <div class="gy-cons">
                <gy-com-left
                    :leftTitle="leftTitle1"
                    @onLeftTab="onLeftTab"
                    :navList="navList"
                    :curIndex="curIndex"
                />
                <div class="gy-r">
                    <div class="gy-r-1">
                        <p>{{ leftTitle }}</p>
                    </div>
                    <div>
                        <div class="cons">
                            <div class="jx-con">
                                <div class="jx-1" v-if="newsList.length > 0">
                                    <router-link
                                        :to="{
                                            path: '/jxdec',
                                            query: {
                                                id: item.id,
                                                parId: param.id,
                                            },
                                        }"
                                        v-for="(item, index) in newsList"
                                        :key="index"
                                    >
                                        <img
                                            :src="
                                                prefixUrl + item.coverImageUrl
                                            "
                                        />
                                        <span>
                                            <p>{{ item.title }}</p>
                                            <p v-if="item.status == 0">
                                                未开始
                                            </p>
                                            <p v-if="item.status == 1">
                                                评审中
                                            </p>
                                            <p v-if="item.status == 2">
                                                已结束
                                            </p>
                                        </span>
                                        <p>
                                            申报时间：{{
                                                item.startTime | pattime
                                            }}
                                            —
                                            {{ item.endTime | pattime }}
                                        </p>
                                        <p>{{ item.createDate | angtime }}</p>
                                    </router-link>
                                </div>
                                <div class="jx-1" v-else>
                                    <p>暂无数据</p>
                                </div>

                                <div class="news-page">
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="totalSum"
                                        :page-size="sizeSum"
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                    ></el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import comHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import gyComLeft from "@/components/gy-com-left";
import _ from "underscore";
import moment from "moment";
import { validPhone, validEmpty } from "@/utils/validate";
export default {
    components: {
        comHeard,
        comFoot,
        gyComLeft,
    },
    filters: {
        pattime(value) {
            if (value) {
                return value.slice(0, 10);
            }
        },
        angtime(value) {
            if (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    },
    data() {
        return {
            curIndex: 0,
            leftTitle1: "赛事申报",
            leftTitle: "",
            navList: [],
            user: {},
            param: {},
            newsList: [],
            prefixUrl: "",
            totalSum: 0,
            sizeSum: 30,
        };
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        this.user = this.$store.getters.user;
        this.curIndex = parseInt(this.$route.query.type) || 0;
        this.getSsglMenu();
    },
    mounted() {},
    methods: {
        async getSsglMenu() {
            const res = await this.$store.dispatch("news/getSsglMenu", {
                menuType: 1,
            });
            const res1 = await this.$store.dispatch("news/getSsglMenu", {
                menuType: 2,
            });

            this.navList = [...res1, ...res];
            this.param = this.navList[this.curIndex];
            this.leftTitle = this.param.title;
            this.getSsglList(1);
        },
        onLeftTab(index) {
            this.curIndex = index;
            this.param = this.navList[index];
            this.leftTitle = this.param.title;
            this.getSsglList(1);
        },
        async getSsglList(val) {
            const data = {
                currentPage: val,
                pageSize: 10,
                rootId: this.param.id,
            };
            const res = await this.$store.dispatch("news/getSsglList", data);
            this.totalSum = res.totalCount;
            this.newsList = res.list;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getSsglList(val);
        },
    },
};
</script>

<style scoped>
@import "./jiangxiang.css";
</style>
